<template>
  <div>
    <el-row>
      <el-col :span="5" style="margin-right: 40px">
        <el-card>
          <el-input v-model="filterText" placeholder="Filter keyword" />
          <el-tree
            style="height: 635px"
            ref="treeRef"
            node-key="id"
            :filter-node-method="filterNode"
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <template v-slot="{ node, data }">
              <!-- 渲染默认节点内容 -->
              <!-- <span>{{ data }}</span> -->
              <div
                style="
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <span>{{ node.label }}</span>
                <IconifyIconOffline
                  v-if="node.level == 1"
                  @click="addGroup"
                  :icon="Plus"
                  @click.stop
                />
                <el-popover placement="bottom-end" :width="100" trigger="click">
                  <template #reference>
                    <IconifyIconOffline
                      slot="reference"
                      v-if="node.level == 2"
                      :icon="Setting"
                      @click.stop
                    />
                  </template>
                  <div style="text-align: center">
                    <el-button link @click="editGroup">修改</el-button>
                    <el-button link @click="deleteGroup">删除</el-button>
                  </div>
                </el-popover>
              </div>
              <!-- <span v-if="data.level == 1">{{ node.label }}</span> -->
            </template>
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <el-form :model="formData" :inline="true">
            <el-form-item label="组名">
              <el-input v-model="formData.groupName" />
            </el-form-item>
            <el-form-item label="人员信息">
              <el-input v-model="formData.userInfo" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary">搜索</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-form>
          <el-button @click="addPerson">
            <IconifyIconOffline :icon="Plus" />
            新增
          </el-button>
          <el-button @click="editPerson">
            <IconifyIconOffline :icon="EditPen" />
            修改
          </el-button>
          <el-button @click="deletePerson">
            <IconifyIconOffline :icon="Delete" />
            删除
          </el-button>
          <pure-table
            :data="tableData"
            :columns="columns"
            :default-sort="{ prop: 'date', order: 'ascending' }"
            @selection-change="handleSelectionChange"
            row-key="id"
            stripe
            :header-cell-style="{
              background: '#eff2fb',
              color: 'var(--el-text-color-primary)'
            }"
            style="margin-top: 30px"
          >
            <template #operation="{ row }">
              <el-button link type="primary"> 修改 </el-button>
              <el-button link type="primary">删除</el-button>
            </template>
          </pure-table>
          <el-pagination
            class="pagination"
            :current-page="listPageObj.currentPage"
            :page-size="listPageObj.pageSize"
            :page-sizes="[10, 50, 100, 200]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listPageObj.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </el-col>
    </el-row>
    <AddGroupRole :title="title" ref="addGroupRole" />
    <AddGroupPepele :title="title2" ref="addGroupPepele" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import AddGroupRole from "./dialog/addGroupRole.vue";
import AddGroupPepele from "./dialog/addGroupPerson.vue";
import type Node from "element-plus/es/components/tree/src/model/node";
import type { TabsPaneContext, ElTree } from "element-plus";
import Plus from "@iconify-icons/ep/plus";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Setting from "@iconify-icons/ep/setting";

interface Tree {
  id: number;
  label: string;
  level: number;
  children?: Tree[];
}
interface Table {
  id: number;
  groupName: string;
  userInfo: string;
  controlScope: string;
}
const filterText = ref("");
const title = ref("新建组");
const title2 = ref("新建组数据子集");
const addGroupRole = ref(null); //定义子组件
const addGroupPepele = ref(null); //定义子组件
const treeRef = ref<InstanceType<typeof ElTree>>();
watch(filterText, val => {
  treeRef.value!.filter(val);
});

const handleNodeClick = (node: Node, data: Tree) => {
  console.log("node", node);
  console.log("data", data);
};
const multipleSelection = ref([]);
const treeData = ref<Tree[]>([
  {
    id: 1,
    label: "Level one 1",
    level: 1,
    children: [
      {
        id: 4,
        label: "Level two 1-1",
        level: 2,
        children: [
          {
            id: 9,
            label: "Level three 1-1-1",
            level: 3
          },
          {
            id: 10,
            label: "Level three 1-1-2",
            level: 3
          }
        ]
      }
    ]
  }
]);
const tableData: Table[] = [
  {
    id: 1,
    groupName: "阿海",
    userInfo: "孔明",
    controlScope: "管控范围"
  }
];

const columns: TableColumnList = [
  {
    type: "selection",
    align: "left"
  },
  {
    label: "组名",
    prop: "groupName"
  },
  {
    label: "人员信息",
    prop: "userInfo"
  },
  {
    label: "管控范围",
    prop: "controlScope"
  },
  {
    label: "操作",
    width: "120",
    fixed: "right",
    slot: "operation"
  }
];

const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.label.includes(value);
};

const defaultProps = {
  children: "children",
  label: "label"
};
const formData = reactive({
  groupName: "",
  userInfo: ""
});
const listPageObj = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});
function handleSizeChange(val: number) {
  console.log(`${val} items per page`);
}
function handleCurrentChange(val: number) {
  console.log(`current page: ${val}`);
}
const handleSelectionChange = val => {
  multipleSelection.value = val;
};

const addGroup = () => {
  title.value = "新建组";
  addGroupRole.value.dialogVisible = true;
};
const editGroup = () => {
  title.value = "编辑组";
  addGroupRole.value.dialogVisible = true;
};
const deleteGroup = () => {
  ElMessageBox.confirm("请确认是否删除组数据以及明细数据？", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};
const addPerson = () => {
  title2.value = "新建组数据子集";
  addGroupPepele.value.dialogVisible = true;
};
const editPerson = () => {
  title2.value = "编辑组数据子集";
  addGroupPepele.value.dialogVisible = true;
};
const deletePerson = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage({
      message: "请选择数据",
      type: "warning"
    });
  } else if (multipleSelection.value.length > 1) {
    ElMessage({
      message: "暂不支持多选",
      type: "warning"
    });
  } else {
    ElMessageBox.confirm("请确认是否删除！", "Warning", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消删除"
        });
      });
  }
};
</script>

<style scoped>
.pagination {
  justify-content: flex-end !important;
  margin-top: 30px;
}
</style>
